<template>
    <div class="lottery page">
        <div class="turntable">
                <div class="turn" :style="{transform:`rotate(${roll}deg)`,transition:transition}">
                    <img :src="turnBg">
                </div>
            <img class="hand" src="./image/hand.png" @click="startLottery">
            <div class="chance" @click="startLottery">{{num||'0'}}次机会</div>
        </div>
        <div class="tips">使用{{amount}}优惠券，增加一次抽奖机会。</div>
        <div class="btn">
            <img class="myPresent" src="./image/getChance.png" @click="getCount">
            <img class="myPresent" src="./image/myPresent.png" @click="showDetail">
        </div>
        <div class="price" v-if="show">
            <div class="title">我的中奖记录</div>
            <div class="form">
                <div class="scroll">
                    <div class="tableName">
                        <span class="Tname">时间</span>
                        <span class="Tprice">奖品</span>
                    </div>
                    <cube-scroll
                            ref="scroll"
                            :data="priceList"
                            :options="options"
                            @pulling-up="getLotteryList"
                    >
                        <div class="tableCell" v-for="(item,index) in priceList" :key="index">
                            <span class="Tname">{{item.time?item.time.split(' ')[0]:''}}</span>
                            <span class="Tprice">{{item.goodsName}}</span>
                        </div>
                    </cube-scroll>
                </div>
            </div>
            <img src="./image/iknow.png" @click="()=>{
                this.show=false
                this.page=1
                this.priceList = []
            }">
        </div>
    </div>
</template>

<script>
    import {showAlert} from "../../dialog";
    import {getLotteryBg,getLotteryCount,startLottery,getLotteryList} from '@/api/lottery'
    import {showLoading,hide} from "../../toast";
    export default {
        name: "lottery",
        data(){
            return{
                roll:null,
                flag:true,
                show:false,
                priceList:[],
                options:{pullUpLoad: true},
                num:null,
                transition:'all 8s ease-out',
                turnBg:null,
                amount:null,
                id:null,
                goodsName:null,
                page:1,
                goodsId:null
            }
        },
        computed:{
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            },
        },
        activated() {
            getLotteryBg().then(res=>{
                console.log(res)
                this.turnBg = this.imgH+res.data.actImg
                this.amount = res.data.amount
                this.num = res.extra.count
                this.id = res.data.id

            })
            this.flag = true
        },
        methods:{
            startLottery(){
                if (!this.flag){return}
                this.flag=false
                if (this.num<1){return}
                showLoading('正在加载')
                startLottery(this.id).then(res=>{
                    console.log(res);
                    if (res.code==10000){
                        this.num--
                    }else {
                        hide()
                        return
                    }
                    this.goodsName = res.data.name
                    this.goodsId = res.data.goodsId
                    this.rotate(res.data.deg,res.data.weight)
                    hide()
                })
            },
            rotate(deg,weight){
                let side = this.roll%360
                this.roll += Math.floor(Math.random()*10+8)*360+(deg-weight*Math.random()*45)-side
                setTimeout(()=>{
                    this.flag = true
                    // if (this.goodsId){
                    //     let title = '恭喜您抽中'+this.goodsName
                    // }
                    this.$createDialog({
                        type: 'alert',
                        title: '恭喜您抽中'+this.goodsName,
                        content: '点击确定后自动领取奖品或跳转奖品页面',
                        icon: 'cubeic-alert',
                        onConfirm:()=>{
                            console.log(this.goodsId)
                            if (this.goodsId){
                                this.$router.push({
                                    path:`/detail?id=${this.goodsId}`
                                })
                            }
                        }
                    }).show()
                },8500)
                // let rolling = setInterval(()=>{
                //     let deg = Math.floor(Math.random()*10+3)*360-45*index-Math.random()*45
                //     if (this.roll>=deg/2){
                //         clearInterval(rolling)
                //         let rollling = setInterval(()=>{
                //             if (this.roll>=deg-1){
                //                 clearInterval(rollling)
                //                 setTimeout(()=>{
                //                     showAlert('23333')
                //                     this.flag=true
                //                 },500)
                //             }
                //             this.roll++
                //         },10)
                //     }
                //     this.roll++
                // },1)
            },
            showDetail(){
                getLotteryList(this.page).then(res=>{
                    console.log(res)
                    this.priceList = this.priceList.concat(res.data)
                    this.show = true
                    this.page++
                    this.$nextTick(()=>{
                        this.$refs.scroll.refresh()
                    })
                })

            },
            getCount(){
                getLotteryCount(this.id).then(res=>{
                    this.num = res.data.amount
                })
            },
            getLotteryList(){
                getLotteryList(this.page).then(res=>{
                    this.priceList = this.priceList.concat(res.data)
                    this.page++
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .lottery
        height 100%
        background-color: #f5f5f5
        background url("./image/bg.png") no-repeat
        background-size 100%
        .turntable
            width: 276.67px
            height: 276.67px
            margin-top 246px
            margin-left 46px
            .turn
                width: 100%
                height 100%
                background-repeat no-repeat
                background-size 100%
                position relative
                img
                    width 100%
                    height 100%
                /*.present
                    position absolute
                    width: 100%
                    height 100%
                    text-align center
                    !*transform-origin *!
                    .word
                        margin-top 20px
                        color: #462E2E
                        font-size 13px
                    img
                        margin-top 10px
                        width: 43px
                        height: 25px*/
            .hand
                position absolute
                width: 90.66px
                top: 302.33px
                left 139.66px
            .chance
                position absolute
                color #A6342E
                font-size 12px
                top 386.66px
                display block
                left 0
                right 0
                text-align center
        .tips
            color: #7FF4E6;
            font-size 15px
            text-align center
            margin-top 50px
        .btn
            display flex
            justify-content space-around
        .myPresent
            width: 155px
            margin-top 20px
            height 50px
        .price
            background url("./image/pricebg.png") no-repeat
            background-size 100%
            position fixed
            z-index 233
            width: 303.66px
            height: 436.33px
            top: 91px
            left 36px
            .title
                color #00C3BD
                font-size 17.58px
                text-align center
                margin-top 83.33px
            img
                width: 228px
                margin-left 41.66px
            .form
                padding-top 22px
                height 200px
                width: 250px
                margin-left 30px
                margin-bottom 48px
                .scroll
                    height 100%
                    width: 100%
                    .tableName
                        display flex
                        justify-content space-around
                        color #656565
                        font-size 13px
                        padding-bottom 5px
                    .tableCell
                        display flex
                        justify-content space-between
                        color #656565
                        font-size 13px
                        margin-bottom 27px
                        span
                            text-align center
                            white-space: nowrap
                            text-overflow: ellipsis
                            overflow: hidden
                            word-break: break-all
                    .Tname
                        flex 0.4
                        text-align center
                    .Tprice
                        flex 0.6
                        text-align center



</style>